<template>
	<div :style='{display: display,"flex-direction": direction,"flex-wrap":getWrap(wrap,rwrap),"justify-content":getOrDefault(flexMapper,hmode),"align-items":getOrDefault(flexMapper,vmode),"align-content":getOrDefault(flexMapper,wmode)}' class='_viv'>
		<slot></slot>
	</div>
</template>

<script>
	export default {
		props: {
      hmode: {
				type: String,
				default: ''
			},
			vmode: {
				type: String,
				default: ''
			},
			wrap: {
				type: Boolean,
				default: false
			},
			rwrap: {
				type: Boolean,
				default: false
			},
			wmode:{
				type:String,
				default: ''
			}
		},
		data: function() {
			return {
				display: 'flex',
				direction: 'column',
				flexMapper:{
					"start":"flex-start",
					"end":"flex-end",
					"center":"center",
					"evenly":"space-evenly",
					"around":"space-around",
					"between":"space-between"
				}
			}
		},
		methods:{
			getOrDefault(mapper,value){
				if(mapper[value]==null)
					return value;
				else return mapper[value];
			},
			getWrap(wrap,rwrap){
				if(wrap)
					return 'wrap';
				else if(rwrap)
					return 'wrap-reverse';
				else 'nowrap';
			}
		}
	}
</script>

<style>
</style>
